<!-- 
	悬浮按钮组件 
	1、悬浮按钮设置：按钮大小、距离顶部、悬浮位置 左、右
	2、悬浮位置设置：显示方式 1独立模式 2  缩略模式、悬浮按钮间距、悬浮窗样式  1：样式一，2：样式二、展开按钮图片、收起按钮图片、按钮图片数组
-->
<template>
	<div :class="className">
		<!-- style -->
		<template v-if="data.list && data.list.chooseStyle ==1">
			<div class="fixed-box" v-for="(item, index) in data.list.list" :key="index"
				:style="{top : `${data.overTop + 114 - (index*(data.list.buttonPadding+50))}px`}">
				<!--悬浮按钮静态-->
				<div class="btn" :style="button_style">
					<image :src="item.image || emptyImage"
						:style="{'width': data.buttonSize+'px', 'height': data.buttonSize+'px'}"></image>
				</div>
			</div>
		</template>
		<template v-if="data.list && data.list.chooseStyle ==2">
			<div class="fixed-box2" :style="{top : `${data.overTop + 114}px`}" v-if="data.list.showStyle ==1">
				<image :style="button_style" :src="data.list.unfoldButton || openImage" class="imgs"></image>
				<div class="btn" v-for="(item, index) in data.list.list" :key="index"
					:style="{top : `${-70*(index+1)}px`,left: `${data.positionLocation =='left'?((data.buttonSize-50)/2)+10: 315-((data.buttonSize-50)/2)}px`}">
					<image :src="item.image || emptyImage"></image>
				</div>
			</div>
			<div class="fixed-box2" :style="{top : `${data.overTop + 114}px`}" v-if="data.list.showStyle ==2">
				<image :style="button_style" :src="data.list.unfoldButton || openImage" class="imgs" @click="openOrClose"/>
				<div v-show="isShow" class="btn" style="top:-70px;" :style="btn_1_style" v-if="data.list.list[0]">
					<image :src="data.list.list[0].image || emptyImage"></image>
				</div>
				<div v-show="isShow" class="btn" :style="btn_3_style" v-if="data.list.list[1]">
					<image :src="data.list.list[1].image || emptyImage"></image>
				</div>
				<div v-show="isShow" class="btn" :style="btn_4_style" v-if="data.list.list[2]">
					<image :src="data.list.list[2].image || emptyImage"></image>
				</div>
				<div v-show="isShow" class="btn" style="top: 70px;" :style="btn_2_style" v-if="data.list.list[3]">
					<image :src="data.list.list[3].image || emptyImage"></image>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import emptyImage from "@/static/images/image.png";
	import openImage from "@/static/images/open.png";
	export default {
		name: 'u_suspendbutton',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						//按钮大小
						"buttonSize": {
							type: Number,
							default: 50
						},
						//距离顶部
						"overTop": {
							type: Number,
							default: 450
						},
						//悬浮位置 左、右
						"positionLocation": {
							type: String,
							default: 'left'
						},
						//悬浮位置设置
						list: {
							list: {
								//显示方式 1独立模式 2  缩略模式
								"chooseStyle": {
									type: String,
									default: '1'
								},
								//悬浮按钮间距
								"buttonPadding": {
									type: Number,
									default: 10
								},
								//悬浮窗样式  1：样式一，2：样式二
								"showStyle": "2",
								//展开按钮图片
								"unfoldButton": {
									type: String,
									default: ''
								},
								//收起按钮图片
								"foldButton": {
									type: String,
									default: ''
								},
								/**
								 * 按钮图片数组
								 * "id": 图片ID
								 * "image": 图片地址
								 * "isMinApp":  1 内部链接 2小程序链接
								 * "h5Link":  H5页面跳转地址 内部链接时赋值
								 * "ghId": 小程序原始ID 2小程序链接时赋值
								 * "minAppLink": 小程序页面跳转地址
								 * "text":  链接名称
								 */
								"list": [],
							}
						}
					}
				}
			}
		},
		computed: {
			button_style() {
				const {
					buttonSize,
					positionLocation,
				} = this.data;

				return `
				            width: ${buttonSize}px;
				            height: ${buttonSize}px;
				            margin-left: ${positionLocation =='left'?'10':365-buttonSize}px;
				        `;
			},
			btn_1_style() {
				const {
					positionLocation,
				} = this.data;

				return `
							left: ${positionLocation =='left'?'10':315}px;
				        `;
			},
			btn_2_style() {
				const {
					buttonSize,
					positionLocation,
				} = this.data;

				return `
							top: ${20+buttonSize}px;
							left: ${positionLocation =='left'?'10':315}px;
				        `;
			},
			btn_3_style() {
				const {
					buttonSize,
					positionLocation,
				} = this.data;

				return `
							top: ${15-buttonSize}px;
							left: ${positionLocation =='left' ? 20+buttonSize:310-buttonSize}px;
				        `;
			},
			btn_4_style() {
				const {
					buttonSize,
					positionLocation,
				} = this.data;

				return `
							top: ${buttonSize-15}px;
							left: ${positionLocation =='left' ? 20+buttonSize:310-buttonSize}px;
				        `;
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},

		},
		data() {
			return {
				isShow: false,
				emptyImage,
				openImage
			}
		},
		methods: {
			// 悬浮按钮 展开和闭合
			openOrClose(){
				this.isShow = !this.isShow;
			}
		},
	}
</script>

<style lang="less" scoped>
	// 默认
	// .component-wrapper {
	//   width: 375px;
	// }

	.fixed-box {
		width: 375px;
		position: fixed;
		top: 114px;
		z-index: 2;

		.btn {
			width: 50px;
			height: 50px;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			flex-direction: column;
			font-size: 13px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}

	.fixed-box2 {
		width: 375px;
		top: 114px;
		z-index: 2;
		position: fixed;

		.imgs {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			z-index: 2;
			position: relative;
		}

		.btn {
			width: 50px;
			height: 50px;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			flex-direction: column;
			font-size: 13px;

			img {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		}
	}
</style>
